<template>
  <div class="third mt-2">
    <div class="warning-title mb-2">预警处理情况</div>
    <div class="flex align-center ml-3 mb-4">
      <div class="colorccc font16 mr-2">严重</div>
      <div class="probox mr-3">
        <progress-bar
          size="large"
          bar-color="#FF8C34"
          bg-color="rgba(255, 140, 52, .4)"
          val="60"
          text="60%"
          text-fg-color="#ffffff"
          font-size="13"
        />
      </div>
      <span class="colorccc font16">500个/800个</span>
    </div>
    <div class="flex align-center ml-3 mb-4">
      <div class="colorccc font16 mr-2">中等</div>
      <div class="probox mr-3">
        <progress-bar
          size="large"
          bar-color="#007FFE"
          bg-color="rgba(0, 127, 254, .4)"
          val="60"
          text="60%"
          text-fg-color="#ffffff"
          font-size="13"
        />
      </div>
      <span class="colorccc font16">500个/800个</span>
    </div>
    <div class="flex align-center ml-3">
      <div class="colorccc font16 mr-2">一般</div>
      <div class="probox mr-3">
        <progress-bar
          size="large"
          bar-color="#E9518E"
          bg-color="rgba(233, 81, 142, .4)"
          val="60"
          text="60%"
          text-fg-color="#ffffff"
          font-size="13"
        />
      </div>
      <span class="colorccc font16">500个/800个</span>
    </div>
  </div>
</template>
<script>
import ProgressBar from "vue-simple-progress";

export default {
  name: "waringThird",
  components: { ProgressBar },
  data() {
    return {};
  },
};
</script>
<style lang="stylus" scoped>
.third {
  width: 617px;
  height: 240px;
  background: url('../../../assets/img/warning/bg03.png') no-repeat;
  background-size: 617px 240px;

  .probox {
    width: 290px;
    height: 16px;
  }
}
</style>